<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业链接地址</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style>
      tr {
        display: flex;
      }

      td,
      th {
        flex: 1;
      }
    </style>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row table-responsive">
        <h1>作业链接地址</h1>
        <table class="table  table-bordered table-striped">
          <thead>
            <tr>
              <th>编号</th>
              <th>姓名</th>
              <th>地址</th>
            </tr>
          </thead>
          <tbody>

            <tr v-for="item,index in teacherLists">
              <td>{{index+1}}</td>
              <td>{{item.name}}</td>
              <td><a :href="item.url" target="_blank">{{item.url}}</a></td>
            </tr>
          </tbody>
        </table>
        <table class="table table-bordered table-striped">
          <caption>每日分数</caption>
          <thead>
            <tr>
              <th>课程\姓名</th>
              <th v-for="item in teacherLists">{{item.name}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in scoresList">
              <td v-for="option in item">{{option}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script>
      const vm = new Vue({
        data: {
          teacherLists: [
            {
              name: "王英杰",
              url: "https://gitee.com/YingJieWang/summer_study_record",
            },
            {
              name: "穆兴宝",
              url: "https://gitee.com/mu_xingbao/muxingbao.git",
            },
            {
              name: "汪洋",
              url: "https://gitee.com/wang_yang_9246/wang_yang.git",
            },
            {
              name: "陈小强",
              url: "https://gitee.com/c13933520379/chenxiaoqiang.git",
            },
            {
              name: "石博文",
              url: "https://gitee.com/shi_bowen/vue_after_class.git",
            },
            {
              name: "王佳伟",
              url: "https://gitee.com/jiaweide/jiawei.git",
            },
            {
              name: "张薇",
              url: "https://gitee.com/todd-zhangwei/summer_homework",
            }
          ],
          scoresList: [
            [
                "vue第一节", 
                "A：尝试所有按钮都是循环渲染出的，并获取按钮的index值，以达到切换路图片的效果",  //王英杰
                "A：尝试将路径放入数组，使用vue中的方法调取数组中的路径，达到切换路图片的效果",  //穆兴宝
                "A：尝试将路径放入数组，使用vue中的方法调取数组中的路径，达到切换路图片的效果",  //汪洋
                "A：尝试将路径放入数组，使用vue中的方法调取数组中的路径，达到切换路图片的效果",  //陈小强
                "A：尝试将路径放入数组，使用vue中的方法调取数组中的路径，达到切换路图片的效果",  //石博文
                "A：尝试将路径放入数组，使用vue中的方法调取数组中的路径，达到切换路图片的效果",  //王佳伟
                "A：尝试将路径放入数组，使用vue中的方法调取数组中的路径，达到切换路图片的效果"   //张薇
            ],
            [
                "vue第二节",
                "A", 
                "A", 
                "A：加减的英文单词反了，尽量做到严谨", 
                "A", 
                "C：第二节没有作业上传", 
                "A", 
                "C：项目上传有问题，问题修改可以找王英杰帮忙"
            ],
            [
                "vue第三节",
                "B：轮播图功能没有实现，container可以有更多的数据渲染，底部菜单需要使用数组传值的形式来编写", 
                "B：轮播图功能没有实现，fontsizeset.js文件和iconfont这种所有组件使用的公共插件，最好放在一个App.vue中；底部菜单需要使用数组传值的形式来编写，container可以有更多的数据渲染", 
                "C：所有动态数据都需要进行数据渲染，比如各个大项的子项目，底部导航栏", 
                "B：轮播图功能没有实现，container可以有更多的数据渲染，底部菜单需要使用数组传值的形式来编写", 
                "B：轮播图功能没有实现，container可以有更多的数据渲染，底部菜单需要使用数组传值的形式来编写", 
                "A：轮播图功能没有实现，底部菜单需要使用数组传值的形式来编写", 
                "C：项目上传有问题，问题修改可以找王英杰帮忙"
            ],
            [
                "vue第四节",
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-" 
            ],
            [
                "vue第五节",
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-", 
                "-"
            ],
          ],
        }
      }).$mount(".container")
    </script>
  </body>
</html>